import type { MaybeRefOrGetter } from 'vue'

export default function useGetPieData(
  data: MaybeRefOrGetter<{ name: string, value: string | number }[]>,
) {
  const pieData = computed(() => {
    return toValue(data).map((v) => {
      return {
        ...v,
        itemStyle: getItemStyle(v),
        label: getLabel(v),
      }
    })
  })

  const fontSizes = [12, 13, 14, 16, 18, 20, 22, 26, 28]

  function getItemStyle(v: { name: string, value: string | number }) {
    return {
      color: getItemColor(v.name),
      borderColor: getBorderColor(v.name),
      borderWidth: 2,
      shadowBlur: 60,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
    }
  }
  const sortedValues = computed(() => {
    const d = toValue(data)
    const values = d.map(vv => +vv.value)
    values.sort((a, b) => a - b)
    return values
  })

  function getLabel(v: { name: string, value: string | number }) {
    const values = toValue(sortedValues)
    const index = values.findIndex(vv => vv === Number(v.value))
    return {
      formatter: '{d}%',
      fontSize: fontSizes[index],
      fontStyle: 'italic',
      fontWeight: 600,
      color: '#ffffff',
    }
  }

  const CS = [
    '#c12e34',
    '#e6b600',
    '#0098d9',
    '#2b821d',
    '#005eaa',
    '#339ca8',
    '#edafda',
    '#32a487',
  ]

  const tintColor = (color: string, tint: number = 1.2) => {
    color = color.charAt(0) === '#' ? color.slice(1) : color
    let red: any = Number.parseInt(color.slice(0, 2), 16)
    let green: any = Number.parseInt(color.slice(2, 4), 16)
    let blue: any = Number.parseInt(color.slice(4, 6), 16)

    if (tint === 0) { // when primary color is in its rgb space
      return [red, green, blue].join(',')
    }
    else {
      red += Math.round(tint * (255 - red))
      green += Math.round(tint * (255 - green))
      blue += Math.round(tint * (255 - blue))

      red = red.toString(16)
      green = green.toString(16)
      blue = blue.toString(16)

      red = red.padStart(2, '0')
      green = green.padStart(2, '0')
      blue = blue.padStart(2, '0')

      return `#${red}${green}${blue}`
    }
  }

  const colors = {
    热力: [CS[0], tintColor(CS[0], 0.6)],
    电力: [CS[1], tintColor(CS[1], 0.6)],
    气体: [CS[2], tintColor(CS[2], 0.6)],
    煤炭: [CS[3], tintColor(CS[3], 0.6)],
    焦炭: [CS[4], tintColor(CS[4], 0.6)],
    油品: [CS[5], tintColor(CS[5], 0.6)],
    其他: [CS[6], tintColor(CS[6], 0.6)],
  }

  function getItemColor(key: string) {
    const color = colors[key as keyof typeof colors] || ['#00C6FF', '#0048FF']
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: color[0],
      }, {
        offset: 1,
        color: color[1],
      }],
      global: false,
    }
  }
  function getBorderColor(key: string) {
    const color = colors[key as keyof typeof colors] || ['#00C6FF', '#0048FF']
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0,
        color: color[0],
      }, {
        offset: 1,
        color: color[1],
      }],
      global: false,
    }
  }

  return {
    pieData,
  }
}
